<template>
  <view class="container">
    <!-- 积分余额显示 -->
    <view class="balance-section">
      <view class="rule" @click="showRule = true">规则</view>
      <view class="left">
        <image :src="userInfo.avatar ? '../../static/missing-face.png' : userInfo.avatar" class="user-head-img"></image>
        <text>{{ userInfo.username }}</text>
      </view>
      <view class="right">
        <text class="balance-label">当前积分</text>
        <text class="balance-value">{{ userPoints }}</text>
      </view>
    </view>

    <!-- 商品分类标签
    <view class="tabs">
      <view class="tab" :class="{ active: activeTab === 'coupons' }" @tap="setActiveTab('coupons')">折扣券</view>
      <view class="tab" :class="{ active: activeTab === 'cash' }" @tap="setActiveTab('cash')">代金券</view>
      <view class="tab" :class="{ active: activeTab === 'shipping' }" @tap="setActiveTab('shipping')">包邮券</view>
    </view> -->

    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="goods-item" v-for="item in exchangeList" :key="item.id">
        <view class="goods-item-top">
          <view>
            <text>数量：</text>
            <text>{{ item.count }}</text>
          </view>
          <view>
            <text>积分：</text>
            <text>{{ item.score }}</text>
          </view>
        </view>

        <mCoupon :coupon="item.coupon">
          <view
            class="exchange-btn"
            :class="{ disabled: item.count === 0 || userPoints < item.score }"
            @click="exchange(item)"
          >
            {{ item.count === 0 ? '已兑完' : '兑换' }}
          </view>
        </mCoupon>
      </view>
    </view>

    <!-- 积分兑换规则 -->

    <view class="integral-rule" v-if="showRule">
      <view class="rule-wrapper">
        <view class="rule-content">
          dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦
          dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦
          dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦
          dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦
          dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦
          dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦
          dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦
          dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦dadasdsa撒旦结案的结案的卡加拿大首都拿骚会计师的那棵大树看打开电脑疯狂放假啊肯德基ask发觉打开了大家阿斯利康的ask打开拉萨的健身卡巨大石块到家啦
        </view>
        <view class="button-readed" @click="showRule = false">已阅</view>
      </view>
    </view>
  </view>
</template>

<script>
import mCoupon from '@/components/mCoupon/index'

export default {
  components: {
    mCoupon
  },
  data() {
    return {
      showRule: false,
      userPoints: 0, // 用户当前积分
      userId: 0,
      // category: 'coupons', // 当前选中的分类 coupons 折扣券 / cash 代金券 / shipping 包邮券
      // goods: [
      //   {
      //     id: 1,
      //     name: '全平台折扣券',
      //     details: '全平台可用', // 使用限制等
      //     money: 0,
      //     coupons: 0.8,
      //     coupon_type: {
      //       name: '全平台'
      //     },
      //     limitMoney: 0,
      //     freePostage: false,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 3000,
      //     stock: -1,
      //     category: 'coupons'
      //   },
      //   {
      //     id: 2,
      //     name: '桂味荔枝代金券',
      //     details: '限桂味荔枝',
      //     coupon_type: {
      //       name: '桂味荔枝'
      //     },
      //     money: 100,
      //     coupons: 0,
      //     limitMoney: 0.01,
      //     freePostage: false,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 500,
      //     stock: 3,
      //     category: 'cash'
      //   },
      //   {
      //     id: 3,
      //     name: '怀枝荔枝包邮券',
      //     details: '限怀枝荔枝',
      //     money: 0,
      //     coupon_type: {
      //       name: '怀枝荔枝'
      //     },
      //     coupons: 0,
      //     limitMoney: 0,
      //     freePostage: true,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 200,
      //     stock: 10,
      //     category: 'shipping'
      //   },
      //   {
      //     id: 4,
      //     name: '黑叶荔枝折扣券',
      //     details: '限黑叶荔枝',
      //     coupon_type: {
      //       name: '黑叶荔枝'
      //     },
      //     money: 0,
      //     coupons: 0.8,
      //     limitMoney: 0,
      //     freePostage: false,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 400,
      //     stock: 0,
      //     category: 'coupons'
      //   },
      //   {
      //     id: 5,
      //     name: '黑叶荔枝代金券',
      //     details: '限黑叶荔枝',
      //     money: 10,
      //     coupons: 0,
      //     limitMoney: 100,
      //     freePostage: false,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 600,
      //     stock: 2,
      //     category: 'cash'
      //   }
      // ],
      exchangeList: []
    }
  },
  onLoad() {
    this.userId = getApp().globalData.userInfo.id
    this.userInfo = getApp().globalData.userInfo
    this.getData()
  },

  methods: {
    getData() {
      this.getScore()
      this.getExchangeList()
    },
    setActiveTab(tab) {
      this.activeTab = tab
    },
    exchange(exchangeObj) {
      // console.log(exchangeObj)

      if (exchangeObj.count === 0) {
        uni.showToast({
          title: '商品已兑完',
          icon: 'none'
        })
        return
      }

      if (this.userPoints < exchangeObj.score) {
        uni.showToast({
          title: '积分不足',
          icon: 'none'
        })
        return
      }

      uni.showModal({
        title: '提示',
        content: '是否兑换该优惠券',
        success: async (res) => {
          if (res.confirm) {
            // console.log('用户点击确定')

            const { data: res } = await uni.request({
              url: this.$domain.data + '/exchangeCoupon',
              header: getApp().globalData.header,
              method: 'POST',
              data: {
                user_id: parseInt(this.userId),
                exchange_id: exchangeObj.id
              }
            })

            if (res.status !== 200) {
              this.$checkStatus(res.status, res.message)
              return
            }
            this.getData()
            uni.showToast({
              title: '兑换成功',
              icon: 'success'
            })
          }
        }
      })
    },

    async getExchangeList() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getUserExchangeCouponList',
        header: getApp().globalData.header
      })

      if (res.status !== 200) {
        this.$checkStatus(res.status)
        return
      }

      this.exchangeList = res.data
    },
    async getScore() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getUserScore/' + this.userId,
        header: getApp().globalData.header
      })

      if (res.status !== 200) {
        this.$checkStatus(res.status)
        return
      }
      // console.log(res)

      this.userPoints = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f5f5f5;
  padding: 20px;
}

.integral-rule {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;

  .rule-wrapper {
    width: 600upx;
    height: 80vh;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 20upx 30upx;
    border-radius: 20upx;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .rule-content {
      width: 100%;
      height: 85%;
      overflow-y: auto;
    }

    .button-readed {
      margin-top: 30upx;
      background-color: #fe6b35;
      color: #ffffff;
      border-radius: 10upx;
      padding: 15upx 50upx;
    }
  }
}

.balance-section {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  position: relative;

  .rule {
    position: absolute;
    right: 15upx;
    top: 10upx;
    font-size: 28upx;
    text-decoration: underline;
    color: blue;
  }

  .left,
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
  }

  .left {
    .user-head-img {
      width: 100upx;
      height: 100upx;
      border-radius: 50%;
      margin-bottom: 10upx;
    }
  }
}

.balance-label {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.balance-value {
  font-size: 24px;
  color: #ff5722;
  font-weight: bold;
}

// .tabs {
//   display: flex;
//   justify-content: space-around;
//   margin-bottom: 20px;
//   padding: 10px 0;
//   background-color: #ffffff;
//   border-radius: 10px;
//   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
// }

// .tab {
//   flex: 1;
//   text-align: center;
//   padding: 10px 0;
//   font-size: 16px;
//   color: #666;
//   border-radius: 5px;
//   cursor: pointer;
//   transition: all 0.3s;

//   &.active {
//     background-color: #ff5722;
//     color: #ffffff;
//   }
// }

.goods-list {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .goods-item {
    .goods-item-top {
      height: 100upx;
      width: 100%;
      background-color: #ffffff;
      border-radius: 20upx 20upx 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

      view {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #868282;
        text:last-child {
          color: #fe6b35;
          font-weight: 900;
        }
        // flex-direction: column;
      }
    }
  }
}

button {
  border: none;
  outline: none;
}

.exchange-btn {
  background-color: #ff5722;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100upx;
  height: 70upx;
  font-size: 30upx;
  padding: 0;
  border-radius: 10upx;
  color: #ffffff;

  cursor: pointer;
  transition: all 0.3s;

  &.disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }

  &:hover {
    opacity: 0.9;
  }
}
</style>
